<template>
  <div class="contain">
    <div class="main-content">
      <div class="filter-bar">
        <el-select v-model="statusFilter" placeholder="请选择处理状态" @change="handleFilterChange">
          <el-option label="全部" value="all" />
          <el-option label="已回复" value=1 />
          <el-option label="未回复" value=0 />
        </el-select>
      </div>

      <div class="table-container">
        <el-table
          :data="paginatedData"
          border
          stripe
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column
            prop="backTime"
            label="提交时间"
            sortable
          />
          <el-table-column
            prop="resTime"
            label="处理时间"
            :formatter="formatProcessingTime"
          />
          <el-table-column
            prop="SponsorName"
            label="处理人"
            :formatter="formatProcessor"
          />
          <el-table-column
            label="当前状态"
            width="120"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.backStatus === 1 ? 'success' : 'info'">
                {{ scope.row.backStatus === 1 ? '已回复' : '未回复' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleView(scope.row)"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="filteredData.length">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="消息详情"
      :visible.sync="dialogVisible"
      width="50%"
      custom-class="reply-dialog"
    >
      <div class="message-detail">
        <div class="question-content">
          <h4>我的提问</h4>
          <div class="content-box">
            {{ this.currentQuestion }}
          </div>
          <div class="message-time">提问时间：{{ currentSubmissionTime }}</div>
        </div>
        <div class="reply-content">
          <h4>回复内容</h4>
          <div class="content-box">
            {{ currentReplyContent || '暂无回复' }}
          </div>
          <div class="message-time">
            <template v-if="currentProcessingTime !== '未处理'">
              回复时间：{{ currentProcessingTime }}
            </template>
            <template v-else>
              {{ currentProcessingTime }}
            </template>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MessageManagement',
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      statusFilter: 'all',
      dialogVisible: false,
      currentReplyContent: '',
      currentQuestion: '',
      currentSubmissionTime: '',
      currentProcessingTime: '',
      messages: [
        { 
          backTime: '2024-10-13 17:02:30', 
          resTime: null, 
          sponsorId: '无', 
          backStatus: 0,
          feedback: '请问如何获  标准的详细信息？',
          response: ''
        },
        { 
          backTime: '2024-08-02 11:15:20', 
          resTime: '2024-10-01 12:02:20', 
          sponsorId: '张三', 
          backStatus: 1,
          feedback: '这个标准是最新版本吗？',
          response: '您的问题已经处理，请查看相关说明...'
        },
        { 
          backTime: '2022-06-18 12:08:12', 
          resTime: '2022-07-13 09:11:17', 
          sponsorId: '李四', 
          backStatus: 1,
          feedback: '能否提供标准的实施指南？',
          response: '问题已解决，如有疑问请继续咨询'
        },
      ],
    }
  },
  computed: {
    filteredData() {
      if (this.statusFilter === 'all') {
        return this.messages
      }
      const filterValue = parseInt(this.statusFilter)
      return this.messages.filter(message => message.backStatus === filterValue)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      return this.filteredData.slice(start, end)
    },
  },
  created() {
    this.fetchMessages();
  },
  methods: {
    async fetchMessages() {
  try {
    const response = await this.$http.get("/findAllFeedback");
    const messages = response.data;
    const updatedMessages = await Promise.all(
      messages.map(async (message) => {
        // 如果 backStatus 为 0，则设置 SponsorName 为 "无"
        if (message.backStatus === 0) {
          return { ...message, SponsorName: "无" };
        } else {
          // 否则，从后端接口根据 sponsorId 获取 SponsorName
          const uNameResponse = await this.$http.get(`/getURealname/${message.sponsorId}`);
          const SponsorName = uNameResponse.data; // 假设后端返回的 SponsorName 在 data 属性中
          return { ...message, SponsorName };
        }
      })
    );
    this.messages = updatedMessages;
  } catch (error) {
    console.error("Error fetching messages:", error);
  }
},
    indexMethod(index) {
      const offset = (this.currentPage - 1) * this.pageSize;
    // 返回行的索引加上偏移量
    return index + 1 + offset;
  },
    handleFilterChange() {
      this.currentPage = 1
    },
    handleView(row) {
      this.currentQuestion = row.feedback
      this.currentReplyContent = row.response || '暂无回复'
      this.currentSubmissionTime = row.backTime
      this.currentProcessingTime = row.resTime || '未处理'
      this.dialogVisible = true
    },
    formatProcessingTime(row) {
      return row.resTime || '未处理'
    },
    formatProcessor(row) {
      return row.SponsorName || '无'
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getProgressStatus(percentage) {
      if (percentage >= 100) return 'success'
      if (percentage >= 50) return 'warning'
      return 'exception'
    },
  },
}
</script>

<style lang="scss" scoped>
.contain {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.head {
  width: 100%;
  background-color: #abe0f3;
  height: 6vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.head .img {
  height: 100%;
  float: left;
}

.head .img img {
  height: 100%;
}

.head .list {
  float: right;
  height: 45%;
}

.head .list img {
  margin-top: 15px;
  margin-right: 7px;
  height: 100%;
  float: left;
}

.head .list li {
  margin-top: 20px;
  margin-right: 40px;
  display: block;
  float: left;
  font-size: 18px;
}

.head .person {
  float: right;
  height: 42%;
}

.head .person img {
  margin-top: 15px;
  margin-right: 7px;
  height: 100%;
  float: left;
}

.head .person li {
  margin-top: 20px;
  margin-right: 70px;
  display: block;
  float: left;
  font-size: 18px;
}

  .crumbs {
    margin-top: 6vh;
    padding: 10px 20px;
    background-color: #f0f0f0; /* 背景颜色 */
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);

    nav {
      display: flex;
      align-items: center;

      a {
        color: #409EFF;
        text-decoration: none;

        &:hover {
          color: #66b1ff;
        }
      }

      .divider {
        margin: 0 8px;
        color: #909399;
      }

      .current {
        color: #606266;
      }
    }
  }

.main-content {
  padding: 20px;
  margin: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

  .filter-bar {
    margin-bottom: 20px;
    
    .el-select {
      width: 200px;
    }
  }

  .table-container {
    margin-bottom: 20px;
  }
}

.pagination-block {
  display: flex;
  justify-content: center;
  padding: 20px 0;

  :deep(.el-pagination) {
    display: flex;
    justify-content: center;
  }
}

.reply-dialog {
  .message-detail {
    .question-content,
    .reply-content {
      margin-bottom: 20px;

      h4 {
        margin: 0 0 10px 0;
        color: #303133;
        font-size: 16px;
        font-weight: 500;
      }

      .content-box {
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 4px;
        min-height: 60px;
        line-height: 1.6;
        color: #606266;

        &:empty::before,
        &:only-child::before {
          content: '暂无回复';
          color: #909399;
          font-style: italic;
        }
      }

      .message-time {
        margin-top: 8px;
        color: #909399;
        font-size: 12px;
        text-align: right;
      }
    }

    .question-content {
      border-bottom: 1px solid #EBEEF5;
      padding-bottom: 20px;
    }

    .reply-content {
      padding-top: 20px;
    }
  }

  .dialog-footer {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
